#loading{
    /*background-image: url(../images/bg.jpg);*/
    /*background-repeat: repeat;*/
    /*!* background-size: 100% 100%; *!*/
    /*background-size: 120px 120px;*/
    /*width: 100vw;*/
    /*height: 100vh;*/
    /*border-bottom: solid 10px #0000cc;*/
}
#main{
    background-image: url(../images/bg.jpg);
    background-repeat: repeat;
    /* background-size: 100% 100%; */
    background-size: 120px 120px;
    /*width: 100vw;*/
    /*height: 100vh;*/
    /*background: rgb(255, 255, 255);*/
    /*width: 100vw;*/
    /*height: 100vh;*/
    overflow: hidden;
    /*border-bottom: 10px solid #00A000;*/
}

#progress{
    background-image:url("../images/bg_loading.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 73.87vw;
    height: 4.13vw;
    border-radius: 3.07vw;
    position: absolute;
    left: 50%;
    top: 65%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#bar{
    position: absolute;
    background-image:url("../images/loading.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 3.53vw;
    width: 0;
    top: 1.71px;
}
.title{
    position: absolute;
    background-image:url("../images/title.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 3.4rem;
    width: 4.5rem;
    top:10vh;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}
#name{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3rem;
    transform: translate(-50%,-50%);
    border: none;
    border-bottom: 2px solid #999797;
    background: none;
    display: none;
    font-size: 0.2rem;
    outline: none;
    padding: 2px 10px;
}
body{
    margin: 0 !important;
}
#canvas{
    width: 100vw;
    height: 100vh;
    /*margin-top: -10px;*/
    /*margin-left: -10px;*/
    /*border-bottom: 10px solid #fff527;*/
}
#share_bg{
    height: 100vh;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    width: 100vw;
    z-index: 810;
    background-color:#252525;
    -moz-opacity:0.8;
    opacity: 0.8;
    display: none;
}
#share_tip{
    position: absolute;
    color: #FFFFFF;
    opacity: 1;
    font-size: 20px;
    right: 0.3rem;
    top:0.3rem;
    width: 25px;
    writing-mode:tb-rl;
}
#userImage{
    display: none;
    width: 0.5rem;
    height: 0.5rem;
}
.btn_merge,.btn_divide{
    position: absolute;
    bottom: 0.6rem;
    /*width: 1.6rem;*/
    /*height: 1.6rem;*/
    display: none;
}
.btn_merge img,.btn_divide img{
    width: 100%;
    height: 100%;
}

.clicked img{
    opacity:0.7;
    filter:alpha(opacity=70);
}
@media screen and (orientation: portrait) {
    #loadingNum{
        color: #FFFFFF;
        font-size: 20px;
        font-family: Arial;
        text-align: center;
        margin-top: 0.5rem;
    }
    .btn_merge,.btn_divide{
        width: 1.6rem;
        height: 1.6rem;
    }
    .btn_merge{
        left: 0.8rem;
    }
    .btn_divide{
        right: 0.8rem;
    }
}
@media screen and (orientation: landscape) {
    #loadingNum{
        color: #FFFFFF;
        font-size: 20px;
        font-family: Arial;
        text-align: center;
        margin-top: 1.5rem;
    }
    .btn_merge{
        left: 2.5rem;
    }
    .btn_divide{
        right: 2.5rem;
    }
    .btn_merge,.btn_divide{
        width: 2.6rem;
        height: 2.6rem;
    }
}
